<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <title>旅游管理后台登录页面</title>
  <link rel="stylesheet" th:href="@{js/bootstrap/css/bootstrap.min.css}">
  <link rel="stylesheet" th:href="@{css/app.css}">
</head>
<body id="particles-js">
  <div class="container">
    <div class="col-md-4 col-md-offset-4">
      <div class="login-wrapper">
        <h1 class="login-title">旅游管理后台登录页面</h1>
        <form id="myForm" method="post">
          <div class="form-group has-feedback">
            <input type="text" class="form-control" name="userName" id="userName" placeholder="用户名 | 邮箱">
            <span class="glyphicon glyphicon-home form-control-feedback"></span>
          </div>
          <div class="form-group has-feedback">
            <input type="password" class="form-control" name="passWord" id="passWord" placeholder="密 码">
            <span class="glyphicon glyphicon-lock form-control-feedback"></span>
          </div>
          <div class="row">
            <div class="col-xs-12">
              <button type="button" id="login" class="btn btn-danger btn-block btn-flat">登  录</button>
            </div>
          </div>
        </form>
        <br>
        <p class="text-right"><a href="#">忘记密码?</a><a href="#" class="text-center">注册账号</a></p>
      </div>
    </div>
  </div>
  <p style="visibility:hidden;">
  </p>
</body>
<script th:src="@{js/jquery.min.js}"></script>
<script th:src="@{js/bootstrap/js/bootstrap.min.js}"></script>
<script type="text/javascript" th:src="@{js/particles.js}"></script>
<script th:src="@{js/demo.js}"></script>
<script th:src="@{js/layer/layer.js}"></script>

<script th:inline="javascript">


    let userName = $("#userName").val();
    let passWord = $("#passWord").val();

    $("#userName").blur(function (){
      if (userName === null){
        layer.msg("用户名不能为空！")
      }

    })

    $("#passWord").blur(function (){
      if (passWord === null){
        layer.msg("密码不能为空！")
      }

    })

    $("#login").click(function (){
      //先使用layer,弹出load（提示加载中...）
      const windowId = layer.load();//获取加载框

      if (passWord === "" || userName === ""){
        layer.msg("用户名和密码不能为空！")
      }

      $.post("/toLogin",$("#myForm").serialize(),function (data){
        //关闭load窗口
        layer.close(windowId);
        //将服务器回复的结果进行显示
        layer.msg(data.msg);
        if (data.status === 1){

          window.location.href = "admin/user/page";
        }
      })

    })

</script>
